<!DOCTYPE html>
<html>
    <body>

        <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script type="text/javascript">
            var move_1_x = 1;
            var move_1_y = 1;
            var move_2_x = -1;
            var move_2_y = -1;
            var temp = 1;
            var image_height = 400;
            var img_x = 0;
            var img_y = 400;
            var ctx_2;
            function draw(){
                var c=document.getElementById("myCanvas");
                var ctx_1=c.getContext("2d");                
                
                var img=new Image();
                img.src="<?php echo $_Q_Url->_base()->url; ?>pages/html5/images/preview.jpg";
                if(move_1_y<=400){
                    ctx_1.drawImage(img,img_x+move_1_x-image_height,img_y-move_1_y);
                    move_1_x++;
                    move_1_y++;
                    myTimer = setTimeout("draw()", 10);
                }
            }
            draw();
        </script>

    </body>
</html>

